<script setup>
// watch 监听功能简单
// 1. 引入 watch 函数
import { ref, watch } from 'vue'
const count = ref(0)
// 2. 调用 watch 传入两个参数, 第一是被监听的数据本身, 第二是触发监听后的回调函数
watch(count, (newVal, oldVal) => {
    console.log('count 变化了');
    console.log('旧数据', oldVal);
    console.log('新数据', newVal);
})



// watch 监听复杂数据
const student = ref({
    name: '张三',
    age: 18,
    sex: '男',
    scoreList: {
        english: 90,
        math: 60
    }
})

// watch 的参数, 1. 数据源 2. 回调函数 3. 其他配置(深度监听, 立即执行)
watch(student, (newVal, oldVal) => {
    console.log('student 变化了');
    console.log('旧数据', oldVal);
    console.log('新数据', newVal);
}, { deep: true, immediate: true })

// watch 监听多个数据变化, 任意一个改变都能触发
watch([count, student], (newVal, oldVal)=>{
    console.log('count 或 student 变化了');
    console.log('旧数据', oldVal);
    console.log('新数据', newVal);
}, {deep:true})

// watch 单独监听复杂数据的其中一个属性 用函数形式返回哪个你想要的数据即可, 如果是简单数据, 无需深度监听
watch( ()=>student.value.age , () => {
    console.log('student.age 变化了, 仅仅监听了这一个数据');
})

// watch 监听复杂数据中的其中一个属性, 但是这个属性本身也是复杂数据
watch(()=>student.value.scoreList, () => {
    console.log('student.scoreList 变化了, 仅仅监听了这一个数据');
}, {deep: true})


</script>

<template>
    <div>
        {{ count }}
        <button @click="count++">+1</button>
    </div>
    <div>
        学生: {{ student.name }} {{ student.age }} {{ student.sex }}
        数学成绩 : {{ student.scoreList.math }}
        <button @click="student.age++">过生日</button>
        <button @click="student.scoreList.math++">增加数学成绩</button>
    </div>
</template>
  
<style lang="less"></style>
  